import React, { useState } from 'react'
import { useLocation } from 'umi'
import { Input, Tabs, Sticky, Card, Button, Toast, Steps } from 'react-vant'
import { ArrowLeft, LocationO, Arrow, ClockO } from '@react-vant/icons'
import { history } from 'umi'
import './zhifu.css'
export default function Tuixinag() {
    const location = useLocation()
    console.log(location.state.obj.price, "路由床惨");
    const [active, setActive] = useState(1);
    const [active2, setActive2] = useState(2);

    // const nextStep = () => setActive((prev) => (prev >= 3 ? 0 : prev + 1));
    return (
        <div style={{ height: "100%" }}>
            <div style={{ height: "120%", background: "#e1e1e1" }}>
                <Sticky>
                    <div style={{ marginTop: "15px", background: "#fff" }}>
                        <p className='fanleft' style={{ display: "inline-block" }} onClick={() => history.push('/zhi', { ids: 0 })}><ArrowLeft fontSize={25} /></p>
                        <p style={{ display: "inline-block" }}>退款详情--处理中</p>
                    </div>
                </Sticky>
                <div style={{ width: "100%", height: "70px", background: "rgb(163, 201, 147)" }}>
                    <p style={{ lineHeight: "70px", marginLeft: "20px", color: "#fff" }}><span style={{ marginRight: "20px" }}><ClockO /></span>退款处理中</p>
                </div>
                <div style={{ marginTop: "10px", width: "100%", height: "70px", background: "#fff" }}>
                    <p style={{ float: 'left', lineHeight: "70px", marginLeft: "20px" }}>退款总金额</p>
                    <p style={{ float: "right", color: "red", lineHeight: "70px", marginRight: "20px" }}>￥204.90</p>
                </div>
                <div>
                    <Card style={{ marginTop: "10px", background: "#fff", height: "95px" }}>
                        {
                            location.state.obj.price < 10 ?
                                <Steps active={active2} style={{ lineHeight: "95px" }}>
                                    <Steps.Item>提交申请</Steps.Item>
                                    <Steps.Item>卖家审核</Steps.Item>
                                    <Steps.Item>退款成功</Steps.Item>
                                </Steps>
                                :
                                <Steps active={active} style={{ lineHeight: "95px" }}>
                                    <Steps.Item>提交申请</Steps.Item>
                                    <Steps.Item>卖家审核</Steps.Item>
                                    <Steps.Item>退款成功</Steps.Item>
                                </Steps>
                        }
                    </Card>

                    <div style={{ marginTop: "10px", background: "#fff", overflow: "hidden" }}>
                        <p style={{ margin: "20px" }}>购物清单</p>
                        <div>
                            {
                                [location.state.obj].map(item => (
                                    <div key={item._id} style={{ marginLeft: "20px" }}>
                                        {
                                            item.imgs.map((item2, index2) => (
                                                <div key={index2} style={{ marginBottom: "15px" }}>
                                                    <img src={item2.img} alt="" style={{ width: "80px", display: "block", display: "inline-block", verticalAlign: "middle" }} />
                                                    <div style={{ display: "inline-block", verticalAlign: "middle" }}>
                                                        <p>{item2.name}</p>
                                                        <p style={{ display: "inline-block", color: "red" }}>￥{item.price.toFixed(2)}
                                                        </p>
                                                    </div>

                                                    <p style={{ display: "inline-block", float: "right", marginRight: "20px", marginTop: "30px" }}>x{item.num}</p>
                                                </div>
                                            ))
                                        }
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                    <div style={{ marginTop: "10px" }}>
                        <Card >
                            <ul style={{ marginTop: "20px" }} className='xiang'>
                                <li >商品总价</li>
                                <li style={{ textAlign: "right", color: "red" }}>￥204.90</li>
                                <li >优惠券</li>
                                <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                <li >红包</li>
                                <li style={{ textAlign: "right", color: "red" }}>-￥10.00</li>
                                <li >包装费</li>
                                <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                                <li >运费</li>
                                <li style={{ textAlign: "right", color: "red" }}>￥0.00</li>
                            </ul>
                        </Card>
                        <p style={{ width: "100%", borderTop: "0.3px solid gainsboro" }}></p>
                        <div style={{ height: "30px" }}>
                            <p style={{ lineHeight: "30px", textAlign: "right", marginRight: "20px" }}>实付款:<span>￥184.90</span></p>
                        </div>
                    </div>
                    <div>
                    </div>
                    <Sticky position='bottom'>
                        <div style={{ height: "50px", textAlign: "right" }}>
                            {
                                location.state.obj.price < 10 ?
                                    <Button round type='primar' hairline style={{ width: "100px", height: "35px" }}>删除订单</Button> :
                                    <Button round type='primar' hairline style={{ width: "100px", height: "35px", color: "#fff" }}>撤销申诉</Button>
                            }
                        </div>
                    </Sticky>

                </div>
            </div>

        </div>
    )
}
